<template>
  <div id="_next">
    <div id="header-wrapper">
      <div id="header">
        <div id="left">
          <a href="/">严选网</a>
          <a href="javascript:void(0)" disabled="">宁波</a>
          <a href="/detail">买车</a>
          <a href="/saleCar">卖车</a>
          <a href="/forumIndex">论坛</a>
          <a href="/serviceGuarantee">服务保障</a>
          <a href="/partner">加盟合伙人</a>
          <ul id="right-dz">
            <li v-if="isLogin == false">
              <a href="login" style="color: black;font-size:16px;margin-right: 25px;">登录</a>
            </li>
            <li v-else>
              <span style="color: black;font-size:16px;margin-right: 20px">{{ this.username }}</span>
            </li>
            <li v-if="isLogin == false">
              <a href="register" style="color: black;font-size:16px;margin-right: 0">注册</a>
            </li>
            <li v-else>
              <input type="button" value="登出" @click="logout" style="font-size: 16px;color: black;background-color:#EAF0FF;border: none">
            </li>
          </ul>
        </div>
      </div>
      <div class="header_bj">
        <div class="sell-submit-box-wrapper">
          <div class="sell-submit-box">
            <h2>高价卖车</h2>
            <h3 class="title-sub">免费提供车辆定价参考与评估服务</h3>
            <div class="phone">
              <input type="text" placeholder="请输入手机号">
            </div>
            <button class="button" type="button" @click="goReg">注册</button>
            <div class="ant-checkbox-checked">
              <input type="checkbox" name="qr" value="qr">
              <div class="txt">
                阅读并同意<a href="/other/legal/terms">《用户服务协议》</a>
                、<a href="/other/legal/privacy">《隐私政策》</a>提交并注册为用户。提交即视为同意严选车电联您提供服务

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div id="content-service">
        <div class="r-sales">
          <h1 class="title">高价卖车服务</h1>
          <div class="title_line"></div>
        </div>
        <el-main style="width: 1080px; margin: 0 auto">
          <el-row>
            <el-col :span="8">
              <div class="c1">
                <div class="icon_1"></div>
                <p class="t">当天拿钱</p>
                <p class="desc">
                  验车现场<br>
                  最高可收全部车款
                </p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="c1">
                <div class="icon_2"></div>
                <p class="t">高价卖车</p>
                <p class="desc">
                  平台推荐买家<br>
                  获取更高报价
                </p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="c1">
                <div class="icon_3"></div>
                <p class="t">省时省心</p>
                <p class="desc">
                  交易手续代办<br>
                  车辆过户不操心
                </p>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </div>
      <div id="content-process">
        <div class="r-course">
          <h1 class="title">高价卖车流程</h1>
          <div class="title_line"></div>
          <el-main style="width: 1080px; margin: 0 auto">
            <el-row>
              <el-col :span="6">
                <div class="c2">
                  <div class="c-icon_1"></div>
                  <p class="t">在线快速预约</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="c1">
                  <div class="c-icon_2"></div>
                  <p class="t">免费上门评估</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="c1">
                  <div class="c-icon_3"></div>
                  <p class="t">当天速拿车款</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="c1">
                  <div class="c-icon_4"></div>
                  <p class="t">省心代办过户</p>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </div>
      </div>
      <div id="load-wrapper ">
        <div class="r-history">
          <div class="title">历史售出</div>
          <div class="title_line"></div>
          <el-main style="width: 1080px; margin: 0 auto">
            <el-row :gutter="10">
              <el-col :span="6">
                <div class="r1">
                  <div class="r-icon_1">
                    <div class="sales-date"></div>
                  </div>
                  <p class="r">大众-高尔夫 2012款 2.0TSI GTI</p>
                  <p class="time-single-line">2012年05月/6.39万公里</p>
                  <div class="pc">
                    <p class="price">15.5万</p>
                    <p class="compare">
                      <span class="c-price">1.1万元</span>
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="r1">
                  <div class="r-icon_2">
                    <div class="sales-date"></div>
                  </div>
                  <p class="r">长城汽车-哈弗H6 2011款 2.0L 手动两驱都市型</p>
                  <p class="time-single-line">2012年03月/3.92万公里</p>
                  <div class="pc">
                    <p class="price">7.35万</p>
                    <p class="compare">
                      <span class="c-price">8000元</span>
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="r1">
                  <div class="r-icon_3">
                    <div class="sales-date"></div>
                  </div>
                  <p class="r">别克-凯越2011款 1.6LE-MT舒适版</p>
                  <p class="time-single-line">2012年06月/3.90万公里</p>
                  <div class="pc">
                    <p class="price">5.38万</p>
                    <p class="compare">
                      <span class="c-price">6000元</span>
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="r1">
                  <div class="r-icon_4">
                    <div class="sales-date"></div>
                  </div>
                  <p class="r">日产-阳光2011款 1.5XE MT舒适版</p>
                  <p class="time-single-line">2012年12月/4.40万公里</p>
                  <div class="pc">
                    <p class="price">5.00万</p>
                    <p class="compare">
                      <span class="c-price">5000元</span>
                    </p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </div>
      </div>
      <div id="content-guide">
        <div class="r-content-guide">
          <h3 class="title">- 人人问答 -</h3>
          <div class="content-guide-container">
            <div class="child1">
              <div class="item">
                <span class="item-title">Q1 人人车怎么帮我卖车？</span>
                <p class="item-content">
                  人人车是专业二手车交易服务平台，每天有百万买家在这里选车，我们只将您的爱车卖给真实买家，在把您的爱车卖个公道价格的同时，完全杜绝了经销商、4S店对您的骚扰。</p>
              </div>
              <div class="item">
                <span class="item-title">Q3 卖车流程是什么？</span>
                <p class="item-content">1、在此页面填写车辆信息，或拨打400-039-6051联系我们。<br>
                  2、卖车顾问与您约定好时间地点后，评估师将上门对车辆进行初步评估，搜集车辆信息且对车辆进行拍照，评估师将依据人人车大数据提供一个建议售价。<br>
                  3、对于符合人人车上架标准的车辆，人人车将车辆信息及初步车况发布至人人车平台，并予以多方推广，为您寻找买家。<br>
                  4、带有购买意向的买家约见看车。<br>
                  5、买家将与您签署《二手车买卖合同》，您须配合进行车辆复检，复检通过后方可办理车辆过户。</p>
              </div>
            </div>
            <div class="child2">
              <div class="item">
                <span class="item-title">Q2 通过人人车出售车辆需要什么费用？</span>
                <p class="item-content">在人人车平台，车辆卖家从车辆信息发布到卖车意向确定整个过程，我们不会收取任何费用。卖家可放心在平台发布车辆信息，匹配合适买家。</p>
              </div>
              <div class="item">
                <span class="item-title">Q4 在人人车转让需要准备什么？？</span>
                <p class="item-content">需要先在网站提供您的联系电话，车辆品牌、型号等基本信息。待服务人员联系您后，在约定时间内准备好
                <div class="left">
                  <p class="p-content">1、身份证</p>
                  <p class="p-content">2、行驶证</p>
                  <p class="p-content">3、车辆登记证</p>
                  <p class="p-content">4、车辆钥匙</p>
                </div>
                <div class="right">
                  <p class="p-content">5、车示标（环保标、检字标、交强险标）</p>
                  <p class="p-content">6、交强险单</p>
                  <p class="p-content">7、购置税本及购置税发票</p>
                  <p class="p-content">8、购车发票/最近一次过户发票</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="r-footer">
        <div class="r-footer-container">
          <div class="baozhang"></div>
          <div class="link-clearfix">
            <div class="link-left">
              <div class="link-left_item">
                <div class="link-left_item-title">关于我们</div>
                <ul>
                  <li><a href="">公司介绍</a></li>
                  <li><a href="">联系我们</a></li>
                  <li><a href="">加入我们</a></li>
                  <li><a href="">加盟合伙人</a></li>
                </ul>
                <ul>
                  <li><a href="">用户服务协议</a></li>
                  <li><a href="">隐私政策</a></li>
                  <li><a href="">法律声明</a></li>
                  <li><a href="">协议及声明</a></li>
                </ul>
              </div>
              <div class="link-left_item" style="width: 140px">
                <div class="link-left_item-title">交易流程</div>
                <ul>
                  <li><a href="">买车流程</a></li>
                  <li><a href="">卖车流程</a></li>
                  <li><a href="">异地购车</a></li>
                </ul>
              </div>
              <div class="link-left_item">
                <div class="link-left_item-title">二手车精选</div>
                <ul>
                  <li><a href="">车型库</a></li>
                  <li><a href="">二手车资讯</a></li>
                  <li><a href="">二手车问答</a></li>
                </ul>
                <ul>
                  <li><a href="">二手车估价</a></li>
                  <li><a href="">二手车迁入标准</a></li>
                </ul>
              </div>
            </div>
            <div class="link-right">
              <div class="link-right_tel">
                <div class="number">400-039-6051</div>
                <div class="time">周一至周日 9:00-18:00</div>
                <div class="text">免费咨询(咨询、建议、投诉)</div>
              </div>
              <div class="link-right_app">
                <div class="r-item">
                  <span>关注微信</span>
                  <div class="lazyload">
                    <img src="../assets/salecar_img/wechat.jpg" alt="" style="width: 100%;">
                  </div>
                </div>
                <div class="r-item">
                  <span>下载APP</span>
                  <div class="lazyload">
                    <img src="../assets/salecar_img/down-app.png" alt="" style="width: 100%;">
                  </div>
                </div>
              </div>
              <div class="link-right_sns">
              </div>
            </div>
          </div>
        </div>
        <div id="r-footer-copyright">
          <div class="r-footer-copyright-container">
            <img src="images/salecar_img/wangbei.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      username: '',
      isLogin: false
    }
  },
  methods: {
    goReg() {
      this.$router.push('/register');
    },
    logout() {
      localStorage.clear();
      location.reload();
    }
  },
  mounted() {
    if (localStorage.getItem('formData') != null) {
      let str = localStorage.getItem('formData');
      this.username = str.substring(9, str.indexOf('&'));
      this.isLogin = true;
    }
  }
}

</script>

<style>
body {
  margin: 0;
}

#_next {
  /*width: 1903px;*/
  width: 100%;
  height: 100%;
  /*margin: 0 auto;*/
}

#header-wrapper {
  /*width: 1903px;*/
  width: 100%;
  height: 450px;
  background-color: rgb(234, 240, 255);
}

#header {
  width: 100%;
  height: 59px;
}

a {
  text-decoration: none
}

#left {
  width: 1200px;;
  height: 59px;
  line-height: 59px;
  margin: 0 auto;
}

#left a, #left span {
  font-size: 16px;
  color: black;
}

#left a {
  margin-right: 30px
}

#left a:hover {
  color: red
}

#left span {
  float: right
}

#left span a:hover {
  color: white
}

.header_bj {
  width: 1200px;
  height: 450px;
  margin: 0 auto;
  background-image: url("/public/images/salecar_img/1.jpg");
  background-repeat: no-repeat;
  background-size: 1200px 450px;
}

.sell-submit-box-wrapper {
  width: 1200px;
  height: 306px;
  position: relative;
}

.sell-submit-box {
  width: 306px;
  height: 226px;
  float: right;
  padding: 40px 20px;
  border-radius: 6px;
  background-color: white;
  margin: 20px 0 0 0;
}

h2 {
  text-align: center;
  font-size: 30px;
  font-weight: normal;
  margin: 0 auto;
}

h3 {
  text-align: center;
  font-size: 16px;
  color: #b3b3b8;
  font-weight: normal;
  margin: 5px 0 21px 0;
}

.phone {
  width: 306px;
  height: 48px;
}

input[type='text'] {
  width: 284px;
  height: 40px;
  padding: 4px 11px;
  border: none;
  border-radius: 2px;
  background-color: #f5f6f9;
  font-size: 18px;
  outline: none;
}

.button {
  width: 306px;
  height: 40px;
  padding: 0 15px;
  border: 1px;
  margin: 14px 0 8px 0;
  background-color: #ff6b23;
  color: white;
  font-size: 18px;
}

.ant-checkbox-checked {
  width: 306px;
  height: 32px;

}

input[type='checkbox'] {
  float: left;
}

.txt {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.36);
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: #ff6b23;
}

#content {
  width: 100%;
  height: 100%;
}

#content-service {
  width: 1080px;
  height: 317px;
  margin: 0 auto;
  background-color: white;
  padding: 80px 60px 120px 60px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
  position: relative;
}

.title {
  text-align: center;
  font-size: 32px;
  font-weight: normal;
}

.r-sales > .title {
  color: #ff7e00;
}

.title_line {
  width: 48px;
  height: 2px;
  background-color: #ff7e00;
  margin: 15px auto 38px;
}

.c1 {
  height: 220px;
  border-radius: 5px;
}

.icon_1 {
  width: 100px;
  height: 100px;
  background-image: url("/public/images/salecar_img/2.png");
  background-position: -232px 0;
  background-size: 333px 333px;
  border-radius: 50px;
  margin: 0 auto;
}

.t {
  text-align: center;
  font-size: 26px;
  color: #262333;
  margin: 12px 0;
}

.desc {
  font-size: 22px;
  color: #93939a;
  text-align: center;
}

.icon_2 {
  width: 100px;
  height: 100px;
  background-image: url("/public/images/salecar_img/2.png");
  background-position: -232px -107px;
  background-size: 333px 333px;
  border-radius: 50px;
  margin: 0 auto;
}

.icon_3 {
  width: 100px;
  height: 100px;
  background-image: url("/public/images/salecar_img/2.png");
  background-position: 0 -232px;
  background-size: 333px 333px;
  border-radius: 50px;
  margin: 0 auto;
}

#content-process {
  width: 100%;
  height: 404px;
  background-color: white;
  padding: 72px 0 0 0;
}

.c2 {
  height: 220px;
  border-radius: 5px;
}

.c-icon_1 {
  width: 110px;
  height: 110px;
  background-image: url("/public/images/salecar_img/2.png");
  background-position: 0px 0px;
  background-size: 333px 333px;
  border-radius: 50px;
  margin: 0 auto;
}

.c-icon_2 {
  width: 110px;
  height: 110px;
  background-image: url("/public/images/salecar_img/2.png");
  background-position: -116px 0px;
  background-size: 333px 333px;
  border-radius: 50px;
  margin: 0 auto;
}

.c-icon_3 {
  width: 110px;
  height: 110px;
  background-image: url("/public/images/salecar_img/2.png");
  background-position: 0px -116px;
  background-size: 333px 333px;
  border-radius: 50px;
  margin: 0 auto;
}

.c-icon_4 {
  width: 110px;
  height: 110px;
  background-image: url("/public/images/salecar_img/2.png");
  border-radius: 50px;
  margin: 0 auto;
  background-position: -116px -116px;
  background-size: 333px 333px;
}

#load-wrapper {
  width: 100%;
  height: 429px;
  margin: 0 auto;
}

.r-history {
  width: 1200px;
  height: 429px;
  margin: 0 auto;
}

.r1 {
  width: 234px;
  height: 300px;
  padding: 8px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}

.r-icon_1 {
  width: 234px;
  height: 156px;
  background-image: url("/public/images/salecar_img/car1.jpg");
  background-size: 100%;
  position: relative;
}

.r-icon_2 {
  width: 234px;
  height: 156px;
  background-image: url("/public/images/salecar_img/car2.jpg");
  background-size: 100%;
  position: relative;
}

.r-icon_3 {
  width: 234px;
  height: 156px;
  background-image: url("/public/images/salecar_img/car3.jpg");
  background-size: 100%;
  position: relative;
}

.r-icon_4 {
  width: 234px;
  height: 156px;
  background-image: url("/public/images/salecar_img/car4.jpg");
  background-size: 100%;
  position: relative;
}

.sales-date {
  background-image: url("/public/images/salecar_img/sale-3day.png");
  width: 152px;
  height: 78px;
  margin: 0;
  position: absolute;
  left: 0px;
  top: 0px;
}

.r {
  font-size: 19px;
  font-weight: bold;
  margin: 8px 0;
  overflow: hidden;
}

.pc {
  position: relative;
  overflow: hidden;
  line-height: 32px;
  margin: 0 auto;

}

.time-single-line {
  color: #afafaf;
  font-size: 14px;
}

.price {
  width: 84px;
  height: 32px;
  margin: 0;
  float: left;
  color: #ff6b23;
  font-size: 28px;
}

.compare {
  float: right;
  width: 133px;
  height: 32px;
  margin: 0;
  background: url(/public/images/salecar_img/sell-more1.png) no-repeat;
  background-size: cover;
}

.c-price {
  color: #fff;
  text-align: center;
  display: inline-block;
  width: 91px;
  font-size: 20px;
  height: 32px;
  line-height: 32px;
  margin: 0 0 1px 1px;
}

#content-guide {
  width: 100%;
  height: 730px;
  margin: 0 0 50px 0;
}

.r-content-guide {
  width: 1080px;
  height: 610px;
  margin: 10px auto;
  padding: 80px 60px 40px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}

#content-guide > .r-content-guide > .title {
  text-align: center;
  color: red;
  font-size: 32px;
  margin-bottom: 38px;

}

.content-guide-container {
  height: 530px;
}

.child1 {
  width: 495px;
  height: 530px;
  box-sizing: border-box;
  float: left;
  margin: 0 90px 0 0;
}

.child2 {
  width: 495px;
  height: 530px;
  box-sizing: border-box;
  float: left;
}

.item {
  width: 495px;
  height: 215px;
}

.item-title {
  font-size: 19px;
  color: #666670;
  background-color: #f1f1f1;
  border-radius: 20px;
  padding: 10px 16px;
  display: inline-block;
  margin-bottom: 20px;
}

.item-content {
  color: #999;
  line-height: 28px;
  font-size: 14px;
  position: relative;
}

.left {
  float: left;
  width: 140px;
}

.p-content {
  color: #999;
  font-size: 14px;
  position: relative;
}

.right {
  float: left;
}

#r-footer {
  background-color: #4c4c4c;
  width: 100%;
  height: 400px;
}

.r-footer-container {
  width: 1200px;
  height: 320px;
  margin: 0 auto;

}

.baozhang {
  height: 74px;
  font-size: 16px;
  color: #fff;
  background-image: url("/public/images/salecar_img/b1.png");
}

.link-clearfix {
  width: 1200px;
  height: 160px;
  margin: 40px auto;
}

.link-left {
  width: 758px;
  height: 123px;
  float: left;
}

.link-left_item {
  width: 300px;
  height: 123px;
  margin-bottom: 6px;
  display: inline-block;
  vertical-align: top;
}

.link-left_item-title {
  width: 234px;
  height: 21px;
  font-size: 16px;
  color: #fff;
  margin: 0 0 10px 0;
}

ul {
  display: inline-block;
  padding: 0;
  margin: 0 40px 0 0;
  vertical-align: top;
}

li {
  line-height: 24px;
  font-size: 14px;
  list-style: none;
}

li > a {
  color: #adadad;
}

.link-right {
  float: right;
  width: 440px;
  position: relative;
}

.link-right_tel {
  width: 160px;
  float: left;
  color: #fff;
}

.number {
  font-size: 22px;
  line-height: 34px;
  margin-top: 20px;
}

.time {
  font-size: 14px;
}

.text {
  font-size: 12px;
  line-height: 24px;
  margin: 5px 0 0;
  color: #979797;
}

.link-right_app {
  float: left;
  width: 272px;
  height: 136px;
}

.r-item {
  width: 88px;
  float: left;
  text-align: center;
  margin-left: 32px;
}

.r-item > span {
  color: #bbbbbb;
  padding-bottom: 8px;
  margin: 0 auto;
}

.lazyload {
  margin: 8px 0 24px 0;
  width: 88px;
  height: 88px;
}

.link-right_sns {
  display: block;
  float: left;
  width: 424px;
  height: 24px;
  background-image: url("/public/images/salecar_img/sns1.png");
}

#r-footer-copyright {
  width: 100%;
  height: 80px;
  font-size: 12px;
  color: #fff;
  background-color: #2f2f2f;

}

.r-footer-copyright-container {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}

#right-dz{float: right}
#right-dz li{float: left;
  font-size: 16px;
  height: 59px;
  line-height: 59px;
}

</style>